<template>
  <a-drawer
    :visible="visible"
    title="详情"
    width="1100"
    :footer-style="{ textAlign: 'right' }"
    :bodyStyle="{
      background: '#f9fafb',
    }"
    @close="onClose"
  >
    <a-row class="card" align="middle">
      <a-col :span="6" style="border-right: 1px solid #efeff5">
        <a-row>
          <a-col>
            <a-avatar :size="64" :src="data?.avatar" />
          </a-col>
          <a-col style="margin-left: 15px">
            <div>名称：{{ data?.nickname }}</div>
            <div>id：{{ data?.id }}</div>
            <div :style="{ color: data?.status == 1 ? '#2ed47a' : '#2878FF' }">
              {{ data?.status_txt }}
            </div>
          </a-col>
        </a-row>
      </a-col>
    
    </a-row>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
    >
      <template #title>
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane
            v-for="item in tabsList"
            :key="item.key"
            :tab="item.title"
          />
        </a-tabs>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'multimedia'">
          <div
            class="image_con"
            v-if="record?.multimedia?.material_url"
            @click="handlePlay(record?.multimedia || {})"
          >
            <video :src="record?.multimedia?.material_url"></video>
            <div class="operate_con">
              <cu-icon
                type="icon-24gl-playCircle"
                style="font-size: 36px; color: #fff"
              />
            </div>
            <div class="bottom_con">
              <span>视频</span>
              <cu-icon
                type="icon-changjing"
                style="font-size: 14px; color: #fff; margin-left: 3px"
              />
            </div>
          </div>
          <div v-else>-</div>
        </template>
        <template v-if="column.key == 'release_status'">
          <a-tag color="blue" v-if="record.release_status == 0">{{
            record?.release_status_text
          }}</a-tag>
          <a-tag color="processing" v-if="record.release_status == 1">{{
            record?.release_status_text
          }}</a-tag>
          <a-tag color="success" v-if="record.release_status == 2">{{
            record?.release_status_text
          }}</a-tag>
          <a-tag color="error" v-if="record.release_status == 3">{{
            record?.release_status_text
          }}</a-tag>
          <a-tag color="default" v-if="record.release_status == 4">{{
            record?.release_status_text
          }}</a-tag>
          <a-tag color="default" v-if="record.release_status == 5">{{
            record?.release_status_text
          }}</a-tag>
        </template>
      </template>
    </a-table>

    <PreviewModal
      :visible="previewVisible"
      :title="previewParams.title"
      :url="previewParams.url"
      :type="previewParams.type"
      @onCancel="previewVisible = false"
    />
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import {} from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
import request from "../../../../common/utils/request";
import PreviewModal from "@/components/PreviewModal/index.vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddGrouping",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    PreviewModal,
  },
  setup(props, { emit }) {
    const state = reactive({
      previewVisible: false,
      previewParams: {
        title: "",
        url: "",
        type: "video",
      },
      count: 0,
      dataSource: [],
      columns: [
        {
          title: "成片",
          dataIndex: "multimedia",
          key: "multimedia",
          width: 160
        },
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "发布状态",
          dataIndex: "release_status",
          key: "release_status",
        },
        {
          title: "允许他人保存视频",
          dataIndex: "download_text",
          key: "download_text",
        },
        {
          title: "设置谁可以看",
          dataIndex: "visibility_type_text",
          key: "visibility_type_text",
        },
        // {
        //   title: "播放量",
        //   dataIndex: "account",
        //   key: "account",
        // },
        // {
        //   title: "评论数",
        //   dataIndex: "fansNum",
        //   key: "fansNum",
        //   sort: true,
        // },
        // {
        //   title: "获赞数",
        //   dataIndex: "shareNum",
        //   key: "shareNum",
        //   sort: true,
        // },
        {
          title: "发布时间",
          dataIndex: "release_time",
          key: "release_time",
          sort: true,
        },
      ],

      loading: false,
      page: 1,
      pageSize: 15,
      total: 0,
      activeKey: -1,
      tabsList: [
        {
          title: "全部",
          key: -1,
        },
        {
          title: "待发布",
          key: 0,
        },
        {
          title: "发布中",
          key: 1,
        },
        {
          title: "发布成功",
          key: 2,
        },
        {
          title: "发布失败",
          key: 3,
        },
        {
          title: "已删除",
          key: 4,
        },
      ],
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
    };

    const handlePlay = (record) => {
      state.previewParams = {
        title: record?.material_name,
        url: record?.material_url,
        type: "video",
      };
      state.previewVisible = true;
    };

    const onClose = () => {
      emit("onCancel");
    };

    const onConfirm = () => {
      emit("onConfirm");
    };

    const getDataList = () => {
      const params = {
        account_id: props.data?.id,
        status: state.activeKey,
        page: state.page,
        pageSize: state.pageSize,
      };
      request
        .get(
          "work_ai",
          state.activeKey != 4
            ? "/user/filmrelease/push/list"
            : "/user/filmrelease/push/list/delete",
          params
        )
        .then((res) => {
          state.dataSource = res.list.data;
          state.total = res.list.total;
        });
    };

    watch(
      () => state.activeKey,
      () => {
        state.page = 1;
        getDataList();
      }
    );

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getDataList();
        }
      }
    );

    return {
      ...toRefs(state),
      onConfirm,
      onClose,
      handlePlay,
      pagination,
      handleTableChange,
    };
  },
});
</script>

<style lang="less" scoped>
.image_con {
  cursor: pointer;
  width: 140px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  position: relative;
  video {
    max-width: 100%;
    max-height: 100%;
  }
  .operate_con {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &:hover {
    .operate_con {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .bottom_con {
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    font-size: 12px;
    padding-left: 5px;
  }
}
.card {
  width: 100%;
  padding: 20px 24px;
  background: #fff;
  margin-bottom: 20px;
  .text-bold {
    font-weight: 700;
  }
}
:deep(.ss-tabs-top > .ss-tabs-nav) {
  margin: 0;
}
:deep(.ss-table-title) {
  padding-bottom: 0;
}
</style>
